import './index.css'
import { SearchOutline, CameraOutline } from 'antd-mobile-icons'
import { useState } from 'react'

function Header() {
  const [typeList, setTypeList] = useState(['全部', '美食', '酒店', '景点', '住宿'])
  const [activeIndex, setActiveIndex] = useState(0)

  return (
    <div className="header">
      <div className="search">
        <div className="search-input">
          <SearchOutline fontSize={16} /> 搜索商品
        </div>
        <div className="camera">
          <CameraOutline fontSize={20} />
        </div>
      </div>
      <div className="type">
        {typeList.map((item, index) => (
          <div
            key={index}
            className={`type-item ${index === activeIndex ? 'active' : ''}`}
            onClick={() => setActiveIndex(index)}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  )
}

export default Header
